<script setup lang='ts'>
// 自定义 规则
interface Props {
    'data': FromInfoItem
}
import { defineExpose, reactive, defineProps } from 'vue';
const props = defineProps<Props>();
/**
 * @property 变量
 */
// 当前需要添加的文本信息
const checkedInfo = reactive<CheckedInfo>({
    subid: 0,
    pick: [],
    txtpick: [],
    mengepick: [],
    input: '',
});

/**
 * @property  所有请求以api开头 如:apiDataInfo
 */


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */
const changAllCheckbox = (v: FromInfoItemOptionsItem) => {
    // checkedInfo.subid = props.data.subid
    // 点击后 表示 是否存在
    if (v.type === 5) {
        // 查询是否存在
        const index = checkedInfo.mengepick.findIndex(item => item.opid === v.opid);
        if (index !== -1) {
            // 删除此项
            checkedInfo.mengepick?.splice(index, 1);
        } else {
            // 添加
            checkedInfo.mengepick?.push({
                opid: v.opid,
                input: '',
                name: v.name,
            })
        }
    } else if (v.type === 4 || v.type === 3) {
        // 对单选进项特殊处理
        if (v.type === 3) {
            checkedInfo.txtpick = [{
                opid: v.opid,
                input: '',
                name: v.name
            }]
            // 清楚 pick
            checkedInfo.pick = []
            return;
        }
        // 查询是否存在
        const index = checkedInfo.txtpick?.findIndex(item => item.opid === v.opid);
        if (index !== -1) {
            // 删除此项
            checkedInfo.txtpick?.splice(index, 1);
        } else {
            // 添加
            checkedInfo.txtpick?.push({
                opid: v.opid,
                input: '',
                name: v.name
            })
        }
    } else {
        if (v.type === 1) {
            checkedInfo.pick = [v.opid];
            checkedInfo.txtpick = [];
            return;
        }
        // 查询是否存在
        const index = checkedInfo.pick?.findIndex(item => item === v.opid);
        // 单选直接替换
        if (index !== -1) {
            // 删除此项
            checkedInfo.pick?.splice(index, 1);
        } else {
            // 添加
            checkedInfo.pick?.push(v.opid);
        }
    }
}
// 抛出函数 避免 拿不到最新值
const exposeChechedInfo = (): {
    info: CheckedInfo,
    type: Number
} => {
    return {
        info: {
            ...checkedInfo,
            txtpick: checkedInfo.txtpick.map(item => ({ input: item.input, opid: item.opid })),
            mengepick: checkedInfo.mengepick.map(item => ({ input: item.input, opid: item.opid })),
            subid: props.data.subid,
        },
        type: props.data.type,

    }
}
// 比例 规则
const inputSupportProportion = (e: string) => {
    if (e == '') return ''
    let value = e;
    // 只允许数字输入
    value = value.replace(/\D/g, '');

    // 更新输入值
    return value
}
/**
 * @property 内置方法
 */
defineExpose({
    exposeChechedInfo
})

</script>
<template>
    <div class="b-rd-2 bg-[#fff] p-3 mt-3">
        <text class="font-size-28 c-red">{{ data.name }}</text>
        <!-- <div class="flex flex-wrap font-size-24"> -->
        <!-- 单选框 -->
        <div v-if="data.options?.[0]?.type === 1 || data.options?.[0]?.type === 3" class="flex flex-wrap font-size-24">
            <up-radio-group placement="column">
                <div class="flex flex-wrap">
                    <div class="w-[50%]" v-for="(v, index) in data.options" :key="index">
                        <up-radio :customStyle="{ marginBottom: '8px' }" :label="v.name" :name="v.name"
                            @change="changAllCheckbox(v)">
                        </up-radio>
                    </div>
                </div>
            </up-radio-group>
        </div>
        <!-- 复选框 -->
        <div v-if="data.options?.[0]?.type === 2 || data.options?.[0]?.type === 4 || data.options?.[0]?.type === 5"
            class="flex flex-wrap font-size-24">
            <div class=" w-[50%]" v-for="(v, index) in data.options" :key="index">
                <up-checkbox :customStyle="{ marginBottom: '8px' }" :label="v.name" :name="v.opid" usedAlone
                    @change="changAllCheckbox(v)">
                </up-checkbox>

            </div>
        </div>
        <div class="flex flex-col">
            <!-- 文本 -->
            <div class="pt-1 pb-1 flex fra" style="border-bottom:1rpx solid #ededed ;"
                v-for="(item, i) in checkedInfo.txtpick" :key="i">
                <text class="font-size-28 mr-2 c-[#FF2A2A]">{{ item.name }}</text>
                <up-input placeholder="请输入内容" border="none" v-model="item.input"></up-input>
            </div>
            <!-- 数量 -->
            <div class="pt-1 pb-1 flex fra" style="border-bottom:1rpx solid #ededed ;"
                v-for="(item, i) in checkedInfo.mengepick" :key="i">
                <text class="font-size-28 mr-2 c-[#FF2A2A]">{{ item.name }}</text>
                <up-input :placeholder="`请输入${item.name}的现存量`" border="none" v-model="item.input" type="number"
                    :formatter="inputSupportProportion"></up-input>
            </div>
        </div>
        <!-- 文本域输入 -->
        <div v-if="data.type === 2">
            <up-textarea v-model="checkedInfo.input" placeholder="请输入原因" count height="100" border="none"></up-textarea>

        </div>
    </div>
</template>
<style lang="scss" scoped></style>